import {ModalForm, ProFormText, ProFormRadio, ProFormUploadButton} from '@ant-design/pro-components';
import {Form, message} from 'antd';
import {PlusOutlined} from '@ant-design/icons';
import React from 'react';
import {ProFormDigit} from "@ant-design/pro-form";

interface QuestionOptionFormProps {
  trigger: React.ReactNode;
  onFinish: (values: API.IQuestionOption) => Promise<boolean>;
  initialValues?: API.IQuestionOption;
  formType: 'create' | 'edit';
  questionId: string;
}

const QuestionOptionForm: React.FC<QuestionOptionFormProps> = ({
                                                                 trigger,
                                                                 onFinish,
                                                                 initialValues,
                                                                 formType,
                                                                 questionId
                                                               }) => {
  const [form] = Form.useForm();

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  return (
    <ModalForm<API.IQuestionOption>
      title={formType === 'create' ? '新增选项' : '编辑选项'}
      width={600}
      trigger={trigger as any}
      form={form}
      autoFocusFirstInput
      onFinish={async (values: any) => {
        const contentImageIds = values?.contentImages?.map((item: any) => item.response.data?.id)
        if (contentImageIds && contentImageIds.length > 0) {
          values.contentImage = contentImageIds[0]
        }
        values.questionId = questionId;
        const success = await onFinish(values);
        if (success) {
          form.resetFields();
        }
        return success;
      }}
      initialValues={initialValues ? {
        ...initialValues,
        contentImage: initialValues.contentImage ? [{
          uid: '-1',
          name: 'image.png',
          status: 'done',
          url: initialValues.contentImage
        }] : []
      } : {
        isCorrect: 0
      }}
    >
      <ProFormText
        name="optionCode"
        label="选项代码"
        placeholder="如A、B、C等"
        rules={[{required: true, message: '请输入选项代码'}]}
      />

      <ProFormText
        name="content"
        label="选项内容"
        placeholder="请输入选项内容"
        rules={[{required: true, message: '请输入选项内容'}]}
      />
      <ProFormDigit
        name="sortOrder"
        label="排序"
        min={0}
        fieldProps={{precision: 0}}
        placeholder="如1、2、3等"
        rules={[{required: true, message: '请输入题目排序'}]}
      />

      <ProFormUploadButton
        name="contentImages"
        label="选项图片"
        action={'/api/file/upload'}
        max={1}
        getValueFromEvent={normFile}
      >
        <div>
          <PlusOutlined/>
          <div style={{marginTop: 8}}>上传图片</div>
        </div>
      </ProFormUploadButton>

      <ProFormRadio.Group
        name="isCorrect"
        label="是否正确答案"
        options={[
          {label: '是', value: "0"},
          {label: '否', value: "1"},
        ]}
      />
    </ModalForm>
  );
};

export default QuestionOptionForm;
